<template>
  <div id="takingOrder">
    <h1>菜品列表页</h1>
    <el-row :gutter="20" align="middle" style="margin: 20px 0;">
      <el-col :span="10" :md="6">
        <div class="grid-content">
          <!--        查询: 通过菜品分类查询 start-->
          <el-select v-model="conditionDishesType" clearable placeholder="按照菜品分类查询" >
            <el-option
              v-for="item in classtyList"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
          <!--        查询: 通过分类查询 end-->
        </div>
      </el-col>
      <el-col :span="10" :md="6">
        <div class="grid-content">
          <!--        查询: 通过菜品名称 start-->
          <el-input type="text" placeholder="名称查询" v-model="dishesName"></el-input>
          <!--        查询: 通过菜品名称 end-->
        </div>
      </el-col>
      <el-col :span="4" :md="2">
        <div class="grid-content bg-purple">
          <el-button type="primary" icon="el-icon-search" @click="searchDishes"></el-button>
        </div>
      </el-col>
      <el-col :span="10" :md="3">
        <div class="grid-content">
          <el-input placeholder="请输入用餐人数" label="用餐人数" v-model.number="peopleNum"></el-input>
        </div>
      </el-col>
      <el-col :span="10" :md="3">
        <div class="grid-content">
<!--          如果是从seats 页面进入就显示这个-->
          <el-input :label="`当前桌号: ${seatnum}`" v-if="inWay" v-model="showSeatNum" disabled></el-input>
<!--          不是就显示这个-->
          <el-select v-model="chooseSeat" v-else clearable placeholder="选择桌号" @change="chooseSeatFn">
            <el-option
              v-for="item in freeSeats"
              :key="item.number"
              :label="item.number"
              :value="item.number">
              <span style="float: left">{{ item.number }}号:{{ item.peopleNum }}人</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.type }}</span>
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="10" :md="2">
        <div class="grid-content">
          <el-button type="primary" plain @click="showMyMenu">我的菜单</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in mylist.tableList " :key="index">
        <Onedish :dishitem="item" v-if="!!seatnum" :seatnum="seatnum"></Onedish>
      </el-col>
    </el-row>
    <Page v-if="!!seatnum"></Page>
    
<!--    我的菜单显示-->
    <el-dialog title="我的菜单" :visible.sync="dialogTableVisible">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-input :value="`桌号:${this.seatnum}` " disabled></el-input>
        </el-col>
        <el-col :span="12">
          <el-input :value="`用餐人数:${this.peopleNum}` " disabled></el-input>
        </el-col>
      </el-row>
      <el-table :data="menu">
        <el-table-column property="name" label="菜品名称" ></el-table-column>
        <el-table-column property="number" label="数量"></el-table-column>
        <el-table-column property="price" label="小计"></el-table-column>
      </el-table>
      <el-row :gutter="20" style="margin: 10px 0">
        <el-col :span="12" align="center">
          <el-button type="primary" @click="dialogTableVisible = false">继续点菜</el-button>
        </el-col>
        <el-col :span="12" align="center">
          <el-button type="primary" @click="gotoMenu">立即下单</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import {mapActions, mapMutations, mapState,mapGetters} from 'vuex'
  import Onedish from '../../components/front/cf/OneDish';
  import Page from '../../components/common/Page';
  export default {
    name: "TakingOrder",
    components: {
      Onedish,
      Page
    },
    data () {
      return {
        conditionDishesType: '', // 用于分类查询
        dishesName: '',// 用于查询
        peopleNum: undefined, // 用餐人数
        seatnum: undefined,  //当前的餐桌号
        dialogTableVisible: false,
        menu: [], //当前桌号的菜单
        bill: {},
        inWay: false,
        freeSeats: [],
        chooseSeat:'' // 选择桌号
        
      }
    },
    computed: {
      ...mapState('dishes/',{
        classtyList: state => state.classtyList,
        dishesList: state => state.dishesList
      }),
      ...mapState('bills/',{
        bills: state => state.bills,
        unchecked: state => state.unchecked
      }),
      ...mapGetters(['mylist']),
      showSeatNum() {
        return '当前桌号: '+ this.seatnum
      }
    },
    methods: {
      ...mapActions('dishes/',['dishesSelectAC']),
      ...mapActions('bills/',['mealsNumberAC','seatDownAC','createOrder','appendOrder']),
      ...mapActions('seats/',['seatsAC']),
      ...mapActions(['getTable','changePage']),
      ...mapMutations(['setPageLenght']),
      // 当菜品类型被改变时
      // typeChange(val){
      //   console.log(this.dishesName === '')
      //   if (this.dishesName === '') {// 类型改变,只查类型
      //     this.dishesSelectAC({
      //       dishesClassify: {
      //         name: val
      //       },
      //       name: 'null'
      //     }).then(res => {
      //       // console.log(res)
      //       // console.log('菜品查询成功')
      //       this.getTable(res)
      //       this.changePage(1)
      //       this.setPageLenght(12)
      //     })
      //   } else {
      //     this.dishesSelectAC({//类型改变,还要查名字
      //       dishesClassify: {
      //         name: val
      //       },
      //       name: this.dishesName
      //     }).then(res => {
      //       console.log('菜品查询成功')
      //       this.getTable(res)
      //       this.changePage(1)
      //       this.setPageLenght(12)
      //     })
      //   }
      //
      // },
      //
      // dishnameblur(){
      //   let typename = this.conditionDishesType === ''?'null':this.conditionDishesType
      //   this.dishesSelectAC({
      //     dishesClassify: {
      //       name: typename
      //     },
      //     name: this.dishesName
      //   }).then(res =>{
      //     this.getTable(res)
      //     this.changePage(1)
      //     this.setPageLenght(12)
      //   })
      // },
      // 显示菜单
      showMyMenu() {
        if (!this.peopleNum) {
          return this.$message.error('输入用餐人数')
        }
        this.updateMenu()
        this.dialogTableVisible = true
      },
      // 更新菜单
      updateMenu(){
        this.bills.forEach(seatItem => {
          if (seatItem.seatNumber === this.seatnum) {
            this.bill = seatItem  // 找到当前桌号的所有信息
            this.menu = seatItem.dishes  // 找到当前桌号的菜单信息,弹出框表格里显示的内容
            if(seatItem.mealsNumber !== null ) {
              this.peopleNum=seatItem.mealsNumber
            }
          }
        })
      },
      //到菜单显示页
      gotoMenu(){
        this.$router.push({path: '/menuDetail',query: {bill: this.bill}})
      },
      // 选择座位
      chooseSeatFn(val) {
        if (val!=='') {
          // 提示: 是否占座
          this.$confirm('请问是否在该座位坐下', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.seatDownAC(val)
            this.seatnum = val
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '换个座位'
            })
          })
        }
      },
      searchDishes() {
        console.log(this.conditionDishesType,this.dishesName)
        let params = {
          dishesClassify: {
            name: this.conditionDishesType !== '' ? this.conditionDishesType : 'null'
          },
          name: this.dishesName!== '' ? this.dishesName : 'null'
        }
        // 去请求:
        this.dishesSelectAC(params).then(res => {
          this.getTable(res)
          this.changePage(1)
          this.setPageLenght(12)
        })
      }
    },
    created() {
      let param = this.$router.currentRoute.params.seatnum
      if (param === 'showDishes') {
        // 不是从桌台页面进入
        this.inWay = false
        // 获取 free seat
        let obj = {
          state: 1,
          peopleNum: 0,
          type: 'null'
        }
        this.seatsAC(obj).then(res => {
          this.freeSeats = res
        })
      } else {
        this.inWay = true
        this.seatnum = parseInt(param)
        this.peopleNum = this.$router.currentRoute.params.mealsNumber||undefined
      }
      this.updateMenu()
      // 查询菜品数据
      this.dishesSelectAC({
        dishesClassify: {
          name: 'null'
        },
        name: 'null'
      }).then(res => {
        this.getTable(res)
        this.setPageLenght(12)
        this.changePage(1)
      })
      
    },
    watch: {
      // conditionDishesType(val) {
      //   if (val==='') {
      //     this.dishesSelectAC({
      //       dishesClassify: {
      //         name:'null'
      //       },
      //       name: 'null'
      //     })
      //   } else {
      //     this.dishesSelectAC({
      //       dishesClassify: {
      //         name:this.conditionDishesType
      //       },
      //       name: 'null'})
      //   }
      // },
      peopleNum(val) {
        if (typeof val !== 'number') {
          this.$message.error('请输入整数')
          this.peopleNum = undefined
          return
        }
        // 写入用餐人数
        let obj = {
          seatnum: this.seatnum,
          peopleNum: val
        }
        this.mealsNumberAC(obj)
      }
    }
  }
</script>

<style lang="less" scoped>
#takingOrder {
  h1 {
    color: #909399;
    text-align: center;
  }
}
</style>
